<template>
  <div class="common-layout">
    <el-container>
      <el-header style="background-color: aqua">
        <h2 style="text-align: center">商城系统主页</h2>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="8" style="background-color: antiquewhite">
            <h2 style="text-align: center">商品列表</h2>
            <div>
              <el-form ref="queryFormRef" v-model="queryForm">
                <el-form-item label="">
                  <el-input v-model="queryForm.keyword" placeholder="请输入关键词"></el-input>
                  <el-button type="primary" @click="getGoodsList">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-scrollbar height="400px">
              <div v-for="item in itemList" :key="item.id" class="scrollbar-demo-item">
                <p>{{ item.goodsName }} </p>
                <p>价格：{{ item.price }} 元</p>
                <el-button type="primary" @click="addCart(item)">加入购物车</el-button>
              </div>
            </el-scrollbar>
          </el-col>
          <el-col :span="8" style="background-color: lightgray">
            <div>
              <h2 style="text-align: center">购物车</h2>
              <el-scrollbar height="400px">
                <div v-for="item in cartList" :key="item.id" class="scrollbar-demo-item">
                  <p>{{ item.goodsName }} </p>
                  <p>价格：{{ item.price }} 元</p>
                  <p>数量：{{ item.count }}</p>
                  <el-button type="danger" @click="removeCart(item)">移出购物车</el-button>
                </div>
              </el-scrollbar>
              <el-text>总价：{{ cartList.reduce((pre, item) => pre + item.price * item.count, 0) }} 元</el-text>
              <el-button type="primary" @click="pay">下单</el-button>
            </div>
          </el-col>
          <el-col :span="8" style="background-color: aqua">
            <h2 style="text-align: center">订单列表</h2>
            <el-scrollbar height="400px">
              <div v-for="item in orderList" :key="item.id" class="scrollbar-demo-item">
                <p>{{ item.orderNumber }} </p>
                <p>价格：{{ item.totalAmount }} 元</p>
                <p>订单状态：{{ item.orderStatus }}</p>
              </div>
            </el-scrollbar>
          </el-col>
        </el-row>
      </el-main>
      <el-footer style="background-color: blueviolet">Footer</el-footer>
    </el-container>
  </div>


</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import axios from "axios";

const itemList = ref([])


const queryFormRef = ref(null)
const queryForm = reactive({
  keyword: ''
})

function getGoodsList() {
  axios.get('/api/mall-search/goods/list', {
    params: queryForm
  }).then(res => {
    itemList.value = res.data.data
  })
}

const orderList = ref([])

function getOrderList() {
  axios.get('/api/mall-order/order/list').then(res => {
    orderList.value = res.data.data
  })
}

onMounted(async () => {
  await Promise.all([getGoodsList(), getOrderList()])
})

const cartList = reactive([]);
const addCart = (item) => {
  cartList.find(itemInCart => itemInCart.id === item.id) ?
      cartList.find(itemInCart => itemInCart.id === item.id).count++ :
      cartList.push({...item, count: 1})
}

const removeCart = (item) => {
  cartList.splice(cartList.indexOf(item), 1)
}


const pay = () => {
  axios.post('/api/mall-order/order/create', {
    goodsList: cartList.map(item => {
      return {
        goodsId: item.id,
        price: item.price,
        goodsName: item.goodsName,
        goodsCount: item.count
      }
    }),
    totalAmount: cartList.reduce((pre, item) => pre + item.price * item.count, 0),
    consumerId: 1
  }).then(res => {
    alert(res.data.message)
    cartList.splice(0, cartList.length)
  })
}


</script>

<style scoped>
.scrollbar-demo-item {
  align-items: center;
  justify-content: center;
  height: 120px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
